import React from 'react';
// import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

import Home from './components/home/Home'
import Pcontent from './components/pcontent/Pcontent'
import Login from './components/login/Login'
import User from './components/user/User'
import Shop from './components/shop/Shop'

let routes = [
  {
    path: '/',
    component: Home,
    exact: true
  },
  {
    path: '/user',
    component: User
  },
  {
    path: '/shop',
    component: Shop
  }
]

function App() {
  return (
    <Router>
      <div className="App">
        <header>
            <Link to="/">Home</Link>
            <Link to="/user">User</Link>
            <Link to="/shop">Shop</Link>
        </header>

        {/* <Route exact path="/" component={Home}/>
        <Route path="/pcontent/:id" component={Pcontent}/>
        <Route path="/login" component={Login} />

        <Route path="/user" component={User}/>
        <Route path="/shop" component={Shop}/> */}

        {
          routes.map((route,key)=>{
            if(route.exact){
              return <Route key={key} exact path={route.path} component={route.component}/>
            }else{
              return <Route key={key} path={route.path} component={route.component}/>
            }
          })
        }
      </div>
    </Router>
  );
}

export default App;
